@font-face {
    font-family: 'ibm_plex_sansbold';
    src: url('../fonts/ibmplexsans-bold-webfont.woff2') format('woff2'),
         url('../fonts/ibmplexsans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ibm_plex_sansitalic';
    src: url('../fonts/ibmplexsans-italic-webfont.woff2') format('woff2'),
         url('../fonts/ibmplexsans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ibm_plex_sansregular';
    src: url('../fonts/ibmplexsans-regular-webfont.woff2') format('woff2'),
         url('../fonts/ibmplexsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'poppinsbold';
    src: url('../fonts/poppins-bold-webfont.woff2') format('woff2'),
         url('../fonts/poppins-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'poppinssemibold';
  src: url('../fonts/poppins-semibold-webfont.woff2') format('woff2'),
       url('../fonts/poppins-semibold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'outfit_regular';
    src: url('../fonts/Outfit-Regular.woff2') format('woff2'),
    url('../fonts/Outfit-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'outfit_semibold';
    src: url('../fonts/Outfit-SemiBold.woff2') format('woff2'),
    url('../fonts/Outfit-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'outfit_bold';
    src: url('../fonts/Outfit-Bold.woff2') format('woff2'),
    url('../fonts/Outfit-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* =================================================================
       RESPONSIVE DESIGN VARIABLES
       Enhanced CSS custom properties for responsive scaling
       Following W3Schools responsive design best practices
       ================================================================= */
    
    /* Font stacks with better fallbacks */
    --stack-b: 'ibm_plex_sansbold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --stack-sb: 'ibm_plex_sanssemibold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --stack-i: 'ibm_plex_sansitalic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --stack-r: 'ibm_plex_sansregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --stack-m: 'ibm_plex_sansmedium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --stack-title-r: 'outfit_regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --stack-title-sb: 'outfit_semibold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --stack-title-b: 'outfit_bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Responsive typography scale - Following W3Schools fluid typography best practices */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);    /* 12px - 14px */
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);      /* 14px - 16px */
    --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);      /* 16px - 18px */
    --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);     /* 18px - 20px */
    --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);      /* 20px - 24px */
    --font-size-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);         /* 24px - 32px */
    --font-size-3xl: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);     /* 28px - 40px */

    /* Responsive spacing scale - More predictable scaling */
    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);   /* 4px - 8px */
    --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);    /* 8px - 12px */
    --space-md: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);     /* 12px - 16px */
    --space-lg: clamp(1rem, 0.8rem + 1vw, 1.5rem);         /* 16px - 24px */
    --space-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);       /* 24px - 32px */
    --space-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);          /* 32px - 48px */
    --space-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);        /* 40px - 64px */

    /* Responsive border radius - More consistent scaling */
    --radius-xs: clamp(2px, 0.125vw, 4px);
    --radius-sm: clamp(4px, 0.25vw, 8px);
    --radius-md: clamp(8px, 0.5vw, 16px);
    --radius-lg: clamp(16px, 1vw, 24px);
    --radius-xl: clamp(24px, 1.5vw, 32px);
    --radius-2xl: clamp(32px, 2vw, 48px);
    --radius-full: 50%;

    /* Responsive line heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Color palette - Enhanced with better contrast */
    --idf-text-color: var(--idf-blue-4);
    --idf-black: #111751;
    --idf-white: #FFFFFF;
    --idf-white-1: #F1F1F1;
    --idf-red: #D71302;
    --idf-red-4: #770A01;
    --idf-blue-4: #2A327B;
    --idf-blue-3: #7053CD;
    --idf-blue-0: #EFF1FF;
    --idf-orange: #FFC07F;
    --idf-yellow: #EAC545;
    --idf-gray-0: #F8F9FA;
    --idf-gray-1: #E9ECEF;
    --idf-gray-2: #DEE2E6;
    --idf-gray-3: #CED4DA;
    --idf-gray-4: #ADB5BD;
    --idf-gray-5: #6C757D;
    --idf-gray-6: #495057;
    --idf-gray-7: #343A40;
    --idf-gray-8: #212529;

    --idf-accent: #1D8669;
    --idf-caution: #FFEB78;
    --idf-warning: #D71302;
    --idf-neutral: #E3F5F2;

    /* Focus and interaction states */
    --idf-focus: var(--idf-blue-4);
    --idf-focus-ring: 0 0 0 2px rgba(42, 50, 123, 0.2);
    --idf-radius: var(--radius-2xl);

    /* Touch target minimum sizes - W3C WCAG AA compliance */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    
    /* Responsive container max-widths - Following W3Schools breakpoints */
    --container-xs: 480px;
    --container-sm: 576px;
    --container-md: 768px;
    --container-lg: 992px;
    --container-xl: 1200px;
    --container-2xl: 1400px;

    /* Animation and transition durations */
    --transition-fast: 150ms;
    --transition-base: 250ms;
    --transition-slow: 350ms;
    --easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;

    /* Grid system */
    --grid-gutter: var(--space-lg);
    --grid-gutter-sm: var(--space-md);
}